<template>
  <span class="state" :class="`state--${status}`">
    {{ stateLabel }}
  </span>

  <el-tooltip v-if="isShowWarning" placement="bottom" :content="rowData.shutdownCause">
    <svg-icon class-name="warning-tip" icon-class="warning_icon" size="16" />
  </el-tooltip>

  <span class="state-number" :class="`state-number--${status}`" v-if="isShowNumber">
    {{ isShowWarning ? rowData.shutdownDays : rowData.expDay }}
    天</span
  >
</template>

<script setup>
import { computed } from "vue";
import { constructionStatus } from "@/views/engineeringManage/config/constructionStatus";

const props = defineProps({
  rowData: {
    type: Object,
    default: () => ({})
  }
});

const status = computed(() => {
  const rowData = props.rowData;
  return rowData.buildStatus === "ing" ? (rowData.exp ? rowData.expStatus : rowData.buildStatus) : rowData.buildStatus;
});

const stateLabel = computed(() => {
  return constructionStatus.has(status.value) ? constructionStatus.get(status.value)?.label : "其他";
});
const isShowNumber = computed(() => {
  return ["time_out", "delay_risk", "shutdown"].includes(status.value);
});
const isShowWarning = computed(() => {
  return ["shutdown"].includes(status.value);
});
</script>

<style scoped lang="scss">
@import "stateView";
</style>
